/**
 * @file /FeatureList.js
 * 交易员特征列表
 * @author fdtai
 */
import React, { PropTypes, PureComponent } from 'react';
import { Table, Input } from 'antd';
import { autobind } from 'core-decorators';

import featureListColumns from './featureListColumns';
import TablePagination from '../common/TablePagination';

const Search = Input.Search;

const styles = {
	date: {
		color: '#888',
		float: 'right',
		paddingRight: 10,
		fontSize: 12,
	},
};

export default class FeatureList extends PureComponent {

	static propTypes = {
		list: PropTypes.array.isRequired,
		onRowClick: PropTypes.func,
	}

	static defaultProps = {
	}

	// 排序
	@autobind
	handleTableChange(page, filters, sorter) {
		const { location: { query }, replace } = this.props;
		replace({
			pathname: '/fdtAnalysis/investmentAnalysis',
			query: {
				...query,
				sortField: sorter.field,
				sortOrder: sorter.order,
			},
		});
	}

	// 分页
	@autobind
	handleChangePage(page, pagesize) {
		const { location: { query }, replace } = this.props;
		replace({
			pathname: '/fdtAnalysis/investmentAnalysis',
			query: {
				...query,
				currentpage: page,
			},
		});
	}
	handleSearch = (value) => {
		const { location: { query }, replace } = this.props;
		replace({
			pathname: '/tradeAnalysis/ability/fdtAnalysis',
			query: {
				...query,
				trader: value,
				currentpage: 1,
			},
		});
	}
	render() {
		const { featuresMapping, dataDate, list, onRowClick, location: { query: { currentpage, trader } } } = this.props;
		const columns = featureListColumns(featuresMapping);

		return (
			<div>
				<div style={{ padding: '0 0 10px' }}>
					<Search
						placeholder="查找交易员"
						style={{ width: 200 }}
						onSearch={this.handleSearch}
						defaultValue={trader}
					/>
					<span style={styles.date}>数据日期：{dataDate}</span>
				</div>
				<Table
					rowKey={record => (record.trader + record.dataDate)}
					size="middle"
					columns={columns}
					dataSource={list}
					pagination={false}
					scroll={{x: '100%', y: 320}}
					onChange={this.handleTableChange}
					onRowClick={(record, index, e) => { onRowClick(record, index, e) && onRowClick(record); }}
				/>
				<TablePagination {...this.props} totalSurfix = '位交易员' />
			</div>
		);
	}
}
